<template>
  <div class="app-container">
    <div class="filter-container">
      <DatePicker
        :query-model="listQuery"
        style="width: 230px"
        @change="handleFilter"
      />
      <el-input
        v-model="listQuery.username"
        class="filter-item"
        clearable
        placeholder="服务主体名称"
        style="width: 150px"
        @keyup.enter.native="handleFilter"
      />

      <el-input
        v-model="listQuery.username"
        class="filter-item"
        clearable
        placeholder="街道名称"
        style="width: 150px"
        @keyup.enter.native="handleFilter"
      />

      <DictSelect
        v-model="listQuery.equipmentUseStatus"
        placeholder="服务主体类型"
        type="service-principal-type"
      />

      <DictSelect
        v-model="listQuery.equipmentUseStatus"
        placeholder="服务状态"
        type="service-status"
      />
      <el-input
        v-model="listQuery.username"
        class="filter-item"
        clearable
        placeholder="联系人名称"
        style="width: 150px"
        @keyup.enter.native="handleFilter"
      />

      <el-input
        v-model="listQuery.username"
        class="filter-item"
        clearable
        placeholder="联系人电话"
        style="width: 150px"
        @keyup.enter.native="handleFilter"
      />

      <el-button
        v-waves
        style="margin-right: 153px; float: right"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
        >搜索</el-button
      >

      <el-button
        v-waves
        type="primary"
        icon="el-icon-plus"
        @click="createServiceProvider()"
        >创建服务商</el-button
      >
    </div>

    <el-table :key="tableKey" :data="list" fit highlight-current-row>
      <el-table-column
        label="街道id"
        prop="id"
        align="center"
      />
      <el-table-column
        label="街道名称"
        prop="associatedStreetName"
        align="center"
      />
      <el-table-column
        label="关联社区"
        prop="associatedCommunity"
        align="center"
      />
       <!-- 关联设备展示数量 -->
      <el-table-column
        label="关联设备"
        prop="associatedCommunity"
        align="center"
      />
     
      <el-table-column
        label="服务状态"
        prop="serviceStatus"
        :formatter="getServiceStatus"
        align="center"
      />
      <el-table-column label="操作" align="center" width="500px">
        <template slot-scope="{ row }">
          <el-button
            v-waves
            v-permission="['sys:role:list']"
            type="primary"
            @click="update(row.id)"
            >基础信息</el-button
          >

          <el-button
            v-waves
            v-permission="['sys:role:save']"
            style="margin-left: 10px"
            type="primary"
            @click="openProductNode(row.id, row.typeName, row.typeId)"
            >暂停服务</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.pageNo"
      :limit.sync="listQuery.pageSize"
      @pagination="getList"
    />

    <!-- 以下是添加服务商 dialog -->
    <el-dialog
      title="设备录入"
      :visible.sync="dialogAddOrUpdateServiceProvider"
      width="75%"
    >
      <el-form ref="dataForm">
        <el-form-item
          label="主体名称:"
          :label-width="formLabelWidth"
          prop="serviceProviderName"
        >
          <el-input
            style="width: 193px"
            v-model="serviceProvider.serviceProviderName"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>

      <el-form ref="dataForm">
        <el-form-item
          label="统一社会信用代码:"
          :label-width="formLabelWidth"
          prop="unifiedSocialCreditCode"
        >
          <el-input
            style="width: 193px"
            v-model="serviceProvider.unifiedSocialCreditCode"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>

      <el-form ref="dataForm">
        <el-form-item
          label="地址:"
          :label-width="formLabelWidth"
          prop="address"
        >
          <el-input
            style="width: 193px"
            v-model="serviceProvider.address"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>

      <el-form ref="dataForm">
        <el-form-item
          label="上传营业执照:"
          :label-width="formLabelWidth"
          prop="businessLicensePictureList"
        >
          <el-upload
            ref="pictureUploadBusinessLicense"
            :action="uploadPath"
            :headers="headers"
            :on-success="handleExcelSuccessBusinessLicense"
            list-type="picture-card"
            :auto-upload="true"
          >
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{ file }">
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.url"
                alt=""
              />
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview(file)"
                >
                  <i class="el-icon-zoom-in"></i>
                </span>

                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleRemoveBusinessLicense(file)"
                >
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-form-item>
      </el-form>

      <el-form ref="dataForm">
        <el-form-item
          label="法人代表:"
          :label-width="formLabelWidth"
          prop="legalRepresentative"
        >
          <el-input
            style="width: 193px"
            v-model="serviceProvider.legalRepresentative"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>

      <el-form ref="dataForm">
        <el-form-item
          label="法人代表身份证号:"
          :label-width="formLabelWidth"
          prop="legalRepresentativeIdCard"
        >
          <el-input
            style="width: 193px"
            v-model="serviceProvider.legalRepresentativeIdCard"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>

      <el-form ref="dataForm">
        <el-form-item
          label="上传法人身份证:"
          :label-width="formLabelWidth"
          prop="idCardPictureList"
        >
          <el-upload
            ref="pictureUploadLegalPerson"
            :action="uploadPath"
            :headers="headers"
            :on-success="handleExcelSuccessLegalPerson"
            list-type="picture-card"
            :auto-upload="true"
          >
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{ file }">
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.url"
                alt=""
              />
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview(file)"
                >
                  <i class="el-icon-zoom-in"></i>
                </span>

                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleRemoveLegalPerson(file)"
                >
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-form-item>
      </el-form>

      <el-form ref="dataForm">
        <el-form-item
          label="联系人姓名:"
          :label-width="formLabelWidth"
          prop="contactPersonName"
        >
          <el-input
            style="width: 193px"
            v-model="serviceProvider.contactPersonName"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>

      <el-form ref="dataForm">
        <el-form-item
          label="联系人身份证号:"
          :label-width="formLabelWidth"
          prop="contactPersonIdCard"
        >
          <el-input
            style="width: 193px"
            v-model="serviceProvider.contactPersonIdCard"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>

      <el-form ref="dataForm">
        <el-form-item
          label="联系手机号:"
          :label-width="formLabelWidth"
          prop="contactWay"
        >
          <el-input
            style="width: 193px"
            v-model="serviceProvider.contactWay"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>

      <el-form ref="dataForm">
        <el-form-item
          label="联系地址:"
          :label-width="formLabelWidth"
          prop="contactAddress"
        >
          <el-input
            style="width: 193px"
            v-model="serviceProvider.contactAddress"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <!-- {{ serviceProvider.contactIdAndCompanyRelationCertificateFileIdList }} -->
      <el-form ref="dataForm">
        <el-form-item
          label="上传联系人身份证及公司关系证明:"
          :label-width="formLabelWidth"
          prop="contactIdAndCompanyRelationCertificateFileIdList"
        >
          <el-upload
            ref="pictureUpload"
            :action="uploadPath"
            :headers="headers"
            :on-success="handleExcelSuccess"
            list-type="picture-card"
            :auto-upload="true"
          >
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{ file }">
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.url"
                alt=""
              />
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview(file)"
                >
                  <i class="el-icon-zoom-in"></i>
                </span>

                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleRemove(file)"
                >
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-form-item>
      </el-form>

      <el-form ref="dataForm">
        <el-form-item
          label="关联街道:"
          :label-width="formLabelWidth"
          prop="associatedStreetName"
        >
          <el-input
            style="width: 193px"
            v-model="serviceProvider.associatedStreetName"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>

      <el-form ref="dataForm">
        <el-form-item
          label="关联社区:"
          :label-width="formLabelWidth"
          prop="associatedCommunity"
        >
          <el-input
            style="width: 193px"
            v-model="serviceProvider.associatedCommunity"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>

      <div style="text-align: center" slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogAddOrUpdateEquipmentSubmit()"
          >确 定</el-button
        >
        <el-button @click="dialogAddOrUpdateServiceProvider = false"
          >取 消</el-button
        >
      </div>
    </el-dialog>
    <!-- 以上是添加服务商 dialog -->
  </div>
</template>

<script>
import {
  getList,
  addOrUpdateServiceProvider,
} from "@/api/service-provider/index.js";
import { upload } from "@/api/common/index.js";
import waves from "@/directive/waves"; // Waves directive
import DictSelect from "@/components/DictSelect";
import DatePicker from "@/components/DatePicker";
import { getToken, getTokenName } from "@/utils/auth";
export default {
  name: "LogTable",
  directives: { waves },
  filters: {},
  components: {
    DatePicker,
    DictSelect,
  },
  data() {
    return {
      tableKey: 0,
      list: null,
      total: 0,
      listQuery: {
        pageNo: 1,
        pageSize: 10,
        orderByField: "createdAt",
        orderBy: "desc",
      },
      dialogAddOrUpdateServiceProvider: false,
      formLabelWidth: "150px",

      //新添加的服务商或者修改的服务商
      serviceProvider: {
        //联系人身份证及公司关系证明文件id 数组
        contactIdAndCompanyRelationCertificateFileIdList: [],
        //法人身份证 文件id 数组
        idCardPictureList: [],
        //营业执照 文件id 数组
        businessLicensePictureList: [],
      },

      //上传图片相关
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,

      //上传的服务器
      uploadPath: "",
      headers: {}, //请求图片上传的头部
    };
  },
  created() {
    this.getList();

    //加载上传的地址
    this.uploadPath = upload();

    //初始化加载头部信息
    this.headers[getTokenName()] = getToken();
  },
  methods: {
    // 获取数据

    //创建服务商
    createServiceProvider() {
      this.dialogAddOrUpdateServiceProvider = true;
    },

    //创建或者添加服务商  提交按钮
    dialogAddOrUpdateEquipmentSubmit() {
      addOrUpdateServiceProvider(this.serviceProvider).then(() => {
        //获取新的消息
        this.getList();
        this.dialogAddOrUpdateServiceProvider = false;
      });
    },

    // 移除联系人的图片  (正统的例子)
    handleRemove(file) {
      let uploadFiles = this.$refs.pictureUpload.uploadFiles;
      for (var i = 0; i < uploadFiles.length; i++) {
        if (uploadFiles[i]["url"] == file.url) {
          uploadFiles.splice(i, 1);

          var thisArry = this.serviceProvider
            .contactIdAndCompanyRelationCertificateFileIdList;
          var fileId = file.response.data.f_id;

          //移除vue 里面将上传的 后端的 fileId数组
          thisArry.splice(
            thisArry.findIndex((e) => e === fileId),
            1
          );
        }
      }
    },

    // 移除法人身份证 的图片
    handleRemoveLegalPerson(file) {
      let uploadFiles = this.$refs.pictureUploadLegalPerson.uploadFiles;
      for (var i = 0; i < uploadFiles.length; i++) {
        if (uploadFiles[i]["url"] == file.url) {
          uploadFiles.splice(i, 1);

          var thisArry = this.serviceProvider.idCardPictureList;
          var fileId = file.response.data.f_id;

          //移除vue 里面将上传的 后端的 fileId数组
          thisArry.splice(
            thisArry.findIndex((e) => e === fileId),
            1
          );
        }
      }
    },

    //移除营业执照 图片
    handleRemoveBusinessLicense(file) {
      let uploadFiles = this.$refs.pictureUploadBusinessLicense.uploadFiles;
      for (var i = 0; i < uploadFiles.length; i++) {
        if (uploadFiles[i]["url"] == file.url) {
          uploadFiles.splice(i, 1);

          var thisArry = this.serviceProvider.businessLicensePictureList;
          var fileId = file.response.data.f_id;

          //移除vue 里面将上传的 后端的 fileId数组
          thisArry.splice(
            thisArry.findIndex((e) => e === fileId),
            1
          );
        }
      }
    },

    //handleRemove (file) { this.$refs.pictureUpload.uploadFiles = [] this.infoFrom.out_img = '' },
    //展示文件
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },

    //下载文件
    handleDownload(file) {
      console.log(file);
    },

    //上传联系人身份证及公司关系证明 成功回调
    handleExcelSuccess(response, file, fileList) {
      if (response.code !== 0) {
        this.$message.error(response.msg);
      } else {
        //数组添加数据
        this.serviceProvider.contactIdAndCompanyRelationCertificateFileIdList.push(
          response.data.f_id
        );

        //this.getList();
      }
    },

    //上传法人身份证 成功回调
    handleExcelSuccessLegalPerson(response, file, fileList) {
      if (response.code !== 0) {
        this.$message.error(response.msg);
      } else {
        //数组添加数据
        this.serviceProvider.idCardPictureList.push(response.data.f_id);

        //this.getList();
      }
    },

    //上传营业执照 成功回调
    handleExcelSuccessBusinessLicense(response, file, fileList) {
      if (response.code !== 0) {
        this.$message.error(response.msg);
      } else {
        //数组添加数据
        this.serviceProvider.businessLicensePictureList.push(
          response.data.f_id
        );

        //this.getList();
      }
    },

    //获取服务状态   1服务中 2已暂停
    getServiceStatus(row, column) {
      const status = row[column.property];
      if (status != null) {
        //1服务中 2已暂停
        if (status == 1) {
          return "服务中";
        } else if (status == 2) {
          return "已暂停";
        } 
      } else {
        return "";
      }
    },

    //加载首页数据
    getList() {
      getList(this.listQuery).then((response) => {
        this.list = response.list;
        this.total = response.totalCount;
      });
    },
    handleFilter() {
      this.listQuery.pageNo = 1;
      this.getList();
    },
  },
};
</script>
